<template>
  <div>
    <!-- 搜索框 -->
    <div class="seacher">
      <div class="seacher-input">
        <icon type="search" size="16px" color="#999"/>
        {{keyword}}
      </div>
    </div>

    <!-- tab栏 -->
    <div class="tab">
      <div class="tab-item"
        v-for="(item,index) in ['综合','销量','价格']" :key="index"
        :class="{active:index===currentIndex}"
        @click="handleChangeTab(index)"
      >{{item}}</div>
    </div>

    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="goods-item" v-for="(item,index) in goodsList" :key="index">
        <img :src="item.goods_small_logo" mode="aspectFill">
        <div class="right">
          <h4>{{item.goods_name}}</h4>
          <div class="price">
            <span>￥</span>{{item.goods_price}}
          </div>
        </div>
      </div>
    </div>
    <div class="more" v-if="!hasMore">
      我也是有底限的~
    </div>
  </div>
</template>

<script>
import request from '../../utils/request.js'

export default {
  data () {
    return {
      currentIndex:0,
      goodsList:[],
      pagenum:1,     //默认第一页
      keyword:'',    //关键字
      isLoading:false ,   //是否正在加载
      hasMore:true     //是否还有更多
    }
  },
  methods: {
    // 处理tab栏的切换
    handleChangeTab(index){
      this.currentIndex=index
    },
    // 处理请求数据列表
    getData(){
      // 如果上次的请求还没有加载完成或者到最后一页时，停止发送请求
      if(this.isLoading || !this.hasMore){
        return;
      }

      // 开始加载
      this.isLoading=true;

      request.get('https://itjustfun.cn/api/public/v1/goods/search',{
        query:this.keyword,
        pagenum:this.pagenum
      })
      .then(res=>{
        // console.log(res);
        const {goods}=res.data.data
        // 把新的数据追加到旧数据中
        this.goodsList=this.goodsList.concat(goods)
        this.pagenum+=1;
        // 执行完成，修改加载状态
        this.isLoading=false;

        // 是否还有更多
        if(goods.length<20){
          this.hasMore=false
        }
      })
    }
  },
  // 页面加载时触发，属于微信小程序的生命周期
  onLoad (query) {
    // 获取参数
    const keyword=query.keyword
    // console.log(query);
    this.keyword=keyword;
    // 初始化页面
    this.getData()
  },
  
  // 页面上拉触底时触发
  onReachBottom(){
    // 重新发送请求
    this.getData()
  },
  
  // 页面卸载时触发
  onUnload(){
    // Object.assign合并对象
    // 获取当前组件最初的值
    Object.assign(this, this.$options.data())
  }
}
</script>

<style scoped lang="scss">
  @import './style.scss'
</style>
